<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="../../styles/common.css"/>
    <link rel="stylesheet" href="../../styles/page.css"/>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../plugins/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../plugins/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="../../plugins/axios/axios.min.js"></script>
    <script src="../../js/request.js"></script>
    <script src="../../js/validate.js"></script>
    <script src="../../js/index.js"></script>
    <script src="../../api/food.js"></script>
    <style>
        .selectInput {
            position: relative;
            width: 100%;
            min-width: 100px;
        }

        .selectInput .flavorSelect {
            position: absolute;
            width: 100%;
            padding: 0 10px;
            border-radius: 3px;
            border: solid 1px #FF903D;
            line-height: 30px;
            text-align: center;
            background: #fff;
            top: 50px;
            z-index: 99;
        }

        .selectInput .flavorSelect .items {
            cursor: pointer;
            display: inline-block;
            width: 100%;
            line-height: 35px;
            border-bottom: solid 1px #f4f4f4;
            color: #666;
        }

        .selectInput .flavorSelect .none {
            font-size: 14px;
        }

        #food-add-app .uploadImg .el-form-item__label::before {
            content: '*';
            color: #F56C6C;
            margin-right: 4px;
        }

    </style>
</head>
<body>
<div class="addBrand-container" id="food-add-app">
    <div class="container">
        <el-form
                ref="ruleForm"
                :model="ruleForm"
                :rules="rules"
                :inline="true"
                label-width="300px"
                class="demo-ruleForm"
        >
            <div>
                <el-form-item
                        label="项目组名称:"
                        prop="name"
                >
                    <el-input
                            v-model="ruleForm.name"
                            placeholder="请填写项目组名称"
                            maxlength="20"
                    />
                </el-form-item>
            </div>
            <div>
                <el-form-item
                        label="负责人名称:"
                        prop="leader"
                >
                    <el-input
                            v-model="ruleForm.leader"
                            placeholder="请填写负责人名称"
                            maxlength="20"
                    />
                </el-form-item>
            </div>
            <div style="margin-left: 350px;padding-bottom: 30px">
                <el-button type="primary" @click="dialogFormVisible = true">添加项目组成员</el-button>
            </div>

            <el-dialog title="添加项目组成员" :visible.sync="dialogFormVisible">
                <template>
                    <el-transfer
                            v-model="ruleForm.person"
                            :titles="['全部人员列表', '项目组所需人员']"
                            :data="data">
                    </el-transfer>
                </template>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="updateData()">确 定</el-button>
                </div>
            </el-dialog>

            <div class="address">
                <el-form-item
                        label="时间:"
                        prop="createTime">
                    <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.createTime">
                    </el-date-picker>
                </el-form-item>
            </div>
            <div class="subBox address">
                <el-form-item>
                    <el-button @click="goBack()">
                        取消
                    </el-button>
                    <el-button
                            type="primary"
                            @click="submitForm(ruleForm)"
                    >
                        保存
                    </el-button>
                </el-form-item>
            </div>
        </el-form>
    </div>
</div>
<script>
    new Vue({
        el: '#food-add-app',
        data() {
            const generateData = _ => {
                const data = [];
                queryMember().then(res => {
                    for (let i = 0; i < res.data.length; i++) {
                        data.push({
                            key: res.data[i].id,
                            label: res.data[i].name,
                        });
                    }
                })

                return data;
            };
            return {
                id: '',
                restKey: 0,
                textarea: '',
                imageUrl: '',
                actionType: '',
                memberList: [],
                memberName: [],
                vueRest: '1',
                index: 0,
                inputStyle: {'flex': 1},
                ruleForm: {
                    'name': '',
                    'leader': '',
                    'person': [],
                    'createTime': ''
                },
                dialogTableVisible: false,
                dialogFormVisible: false,
                mak: false,
                data: generateData(),
                value: []
            }
        },
        created() {
            this.init()
            console.log(this.data)
        },
        computed: {
            rules() {
                return {
                    'name': [
                        {'required': true, 'message': '请填写项目组名称', 'trigger': 'blur'}
                    ],
                    'leader': [
                        {'required': true,
                            validator: (rules, value, callback)=>{
                            let flag=false;
                            for (let i=0;i<this.memberName.length;i++){
                                if (value===this.memberName[i]){
                                    flag=true;
                                }
                            }
                            if (flag===false){
                                callback(new Error('系统中未发现该用户'))
                            }
                            }
                        , 'trigger': 'blur'}
                    ]
                }
            }
        },
        methods: {
            async init() {
                queryMember().then(res => {
                    this.memberList = res.data
                    for (let i = 0; i < res.data.length; i++) {
                        this.memberName[i] = res.data[i].name
                    }
                })
            },
            submitForm(form) {
                let sub_form={
                    'name':'',"leader":'','person':'','createTime':''
                }
                sub_form.name=form.name
                sub_form.leader=form.leader
                sub_form.person=form.person
                sub_form.createTime=form.createTime
                let person=''
                let personNum=sub_form.person;
                for (let i=0;i<personNum.length;i++){
                    if (i!= personNum.length-1){
                        person = person + personNum[i] + ",";
                    } else {
                        person += personNum[i];
                    }
                }
                sub_form.person=person
                for(let i=0;i<this.memberList.length;i++){
                    if (sub_form.leader===this.memberList[i].name){
                        sub_form.leader=this.memberList[i].id
                    }
                }
                console.log(sub_form)
                addProject(sub_form).then(res => {
                    if (res.code===1){
                        this.$message.success('添加成功！')
                    }else {
                        this.$message.error(res.msg || '操作失败')
                    }
                })
                this.ruleForm={
                    'name': '',
                    'leader': '',
                    'person': [],
                    'createTime': ''
                }
                window.parent.menuHandle({
                    url: '/paper/page/project/list.html'
                }, true)
            },

            handleAvatarSuccess(response, file, fileList) {
                // 拼接down接口预览
                if (response.code === 0 && response.msg === '未登录') {
                    window.top.location.href = '/backend/page/login/login.html'
                } else {
                    this.imageUrl = `/common/download?name=${response.data}`
                    this.ruleForm.image = response.data
                }
            },

            onChange(file) {
                if (file) {
                    const suffix = file.name.split('.')[1]
                    const size = file.size / 1024 / 1024 < 2
                    if (['png', 'jpeg', 'jpg'].indexOf(suffix) < 0) {
                        this.$message.error('上传图片只支持 png、jpeg、jpg 格式！')
                        this.$refs.upload.clearFiles()
                        return false
                    }
                    if (!size) {
                        this.$message.error('上传文件大小不能超过 2MB!')
                        return false
                    }
                    return file
                }
            },

            goBack() {
                window.parent.menuHandle({
                    id: '4',
                    url: '/backend/page/food/list.html',
                    name: '菜品管理'
                }, false)
            },
            updateData() {
                this.dialogFormVisible = false;
            }
        }
    })
</script>
</body>
</html>